.wraper {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

    &.dark {
        --subtitle-color: #3333331a;
        --title-color: #333;
    }

    &.light {
        --subtitle-color: #ffffff1a;
        --title-color: #fff;
    }
}

.consultebox,
.consultepcbox {
    @apply flex rounded-sm ;

    background: linear-gradient(180deg, #FEF3EA 0%, #FFF 100%);
    box-shadow: 0 4px 12px 0 #00000014;
    color: #333;
}

.consultebtn,
.consultepcbtn{
    @apply w-full font-500 flex items-center justify-center text-white cursor-pointer;

    background: linear-gradient(90deg, #FE8207 0%, #F40 100%);
    color: #fff;
}

.mobile.wraper {
    .consultepcbox {
        display: none;
    }

    .consultebox {
        @apply flex-col pt-12px pb-20px px-12px leading-5 mb-5;
        // max-width: calc(100% - 24px);
    }

    .swiper-pagination-box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .consultetop{
        @apply flex flex-row items-center justify-start;

        gap: 10px;
    }

    .consulteimg{
        @apply rounded-full;

        width: 40px;
        height: 40px;
    }

    .consulteinfo{
        @apply flex flex-col ;

        gap: 4px;
        color: #666;
        font-size: 12px;
        line-height: 12px;
    }

    .consultetitle{
        // @apply text-2xl;
    }

    .consultedesc{
        // @apply text-base mt-3;
    }

    .consulteguide{
        @apply mt-2 text-sm ;
    }

    .consultebtn{
        @apply px-auto py-13px mt-14px text-sm;

        font-size: 12px;
        line-height: 12px;
        border-radius: 24px;
    }
}

.pc.wraper {
    .consultebox {
        display: none;
    }

    .consultepcbox {
        @apply  w-full flex-row justify-between items-center py-24px pl-5 max-w-1180px mx-auto mb-10;
    }

    .consultepctop{
        @apply flex flex-row items-center;

        gap: 16px;
    }

    .consultepcimg{
        @apply rounded-full;

        width: 72px;
        height: 72px;
    }

    .consultepcinfo{
        @apply flex flex-col gap-1;
    }

    .consultepcguide{
        @apply text-xl font-600 leading-28px ;
    }

    .consultepctitle{
        // font-size: 42px;
    }

    .consultepcdesc {
        @apply text-sm font-400 leading-5 ;

        color: #666
    }

    .consultepcbtn{
        @apply flex rounded-full py-3 px-26px mr-5 font-700 text-base leading-6;

        min-width: 180px;
        // height: 48px;
        width: auto;
    }

    .consultepcbtn:hover{
        @apply  py-4 px-30px mr-4;

        // height: 56px;
    }
}
